<template>
  <el-dialog title="片区分成管理"
             :close-on-click-modal="false"
             :visible.sync="visible"
             @close="close"
             width="50%">
    <div class="section">
      <div style="padding-bottom: 12px">合伙人</div>
      <el-table :border="true" :data="partnerList" style="width: 100%">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            <el-tag>{{getRoleTxt(scope.row.partnerRole)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分成比例 %" prop="rate"></el-table-column>
      </el-table>
    </div>

    <div class="section">
      <div style="padding-bottom: 12px">公司</div>
      <el-table :border="true" :data="companyList" style="width: 100%">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            <el-tag>{{getRoleTxt(scope.row.partnerRole)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分成比例 %" prop="rate"></el-table-column>
      </el-table>
    </div>

    <div class="section">
      <div style="padding-bottom: 12px">额外奖励</div>
      <el-table :border="true" :data="others" style="width: 100%">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            <el-tag>{{getRoleTxt(scope.row.partnerRole)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分成比例 %" prop="rate"></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'divideInfo',
    data () {
      return {
        visible: false,
        partnerList: [],
        companyList: [],
        others: []
      }
    },
    methods: {
      init (id) {
        this.visible = true
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/charging/group/get/divide/info'),
          method: 'get',
          params: this.$http.adornParams({id: id})
        }).then(({ data }) => {
          console.log(data)
          this.companyList = data.data.companyPropInfo.chargingGroupProps
          this.partnerList = data.data.partnerPropInfo.chargingGroupProps
          this.others = data.data.otherDivideList
        })
      },

      getRoleTxt (role) {
        if (role == 0) {
          return '公司合伙人'
        }
        else if (role == 1){
          return '市场合伙人'
        }
        else if (role == 2){
          return '管理合伙人'
        }
        else if (role == 3) {
          return '分佣合伙人'
        }
        else if (role == 4) {
          return '购买合伙人'
        }
      },

      close () {
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .section{
    margin-bottom: 20px;
  }
</style>
